<template>
  <div class="meeting-container">
    <div class="meeting-header">
      <div class="meeting-title">
        当前会议：关于MU6655航班航行事故的应急会议
      </div>
    </div>
    <div class="meeting-main">
      <div class="meeting-members">
        <div class="member-item" v-for="(item, index) in members" :key="index">
          <div class="member-avatar">
            <img :src="item.avatar" />
          </div>
          <div class="member-name">{{ item.nickName }}</div>
        </div>
      </div>
      <div class="meeting-notice">正在发言：任弘盛</div>
    </div>
    <div class="meeting-control">
      <div class="ctl-btn">
        <cus-button type="primary" icon="el-icon-message-solid"
          >开启麦克风</cus-button
        >
        <cus-button type="warning" icon="el-icon-s-opportunity"
          >邀请成员</cus-button
        >
        <cus-button type="danger" icon="el-icon-error" @click="exitMeeting"
          >退出会议</cus-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import CusButton from "@/components/CusButton/button.vue";
export default {
  name: "MeetingDetail",
  components: { CusButton },
  data() {
    return {
      members: [
        { avatar: "/assets/avatars/avatar_1.jpg", nickName: "任弘盛" },
        { avatar: "/assets/avatars/avatar_2.jpg", nickName: "许奇思" },
        { avatar: "/assets/avatars/avatar_3.jpg", nickName: "赵茂" },
      ],
    };
  },
  methods: {
    exitMeeting() {
      this.$tab.closePage();
    },
  },
};
</script>
<style lang="scss" scoped>
.meeting-container {
  height: calc(100vh - 84px);
  display: flex;
  flex-flow: column;
  overflow: hidden;
  .meeting-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    .meeting-title {
      background-color: #009dfa;
      padding: 10px 20px;
      text-align: center;
      border-radius: 10px;
      color: white;
      font-size: 14px;
    }
  }
  .meeting-main {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    .meeting-members {
      display: flex;
      flex-flow: row;
      justify-content: center;
      align-items: center;
      .member-item {
        color: white;
        text-align: center;
        width: 60px;
        margin-right: 30px;
        &:last-child {
          margin-right: 0;
        }
        .member-avatar {
          width: 60px;
          height: 60px;
          border-radius: 30px;
          overflow: hidden;
          img {
            width: inherit;
            height: inherit;
          }
        }
        .member-name {
          margin-top: 15px;
        }
      }
    }
    .meeting-notice {
      margin-top: 40px;
      color: #009dfa;
    }
  }
  .meeting-control {
    padding: 30px;
    .meeting-notice {
      text-align: center;
      margin-bottom: 20px;
    }
    .ctl-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      .cus-button {
        margin-right: 30px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
